DOM:文檔對象模型;
元素節(jié)點:DOM的原子是元素節(jié)點。<body>、<p>、<ul>之類的元素。元素可以包含其他的元素。沒有被包含在其他元素里的唯一元素是<html>元素
文本節(jié)點:在XHTML文檔里,文本節(jié)點總是被包含在元素節(jié)點的內(nèi)部。
屬性節(jié)點:屬性節(jié)點用來對元素做出更具體的描述。例如,幾乎每個元素都有一個title屬性,而我們可以利用這個屬性對包含在元素里的東西作出準(zhǔn)確的描述:
<p title="a gentle reminder">Don't forget to buy this stuff.</p>
在DOM中,title="a gentle reminder"是一個屬性節(jié)點。
getElementById, getElementsByTagName, getElementsByClassName三種可以獲取元素節(jié)點的方法。
getElementsByTagName允許把一個通配符作為它的參數(shù),而這意味著文檔里的每個元素都將在這個函數(shù)所返回的數(shù)組里占有一席之地。通配符(“*”)必須在引號里,這是為了和乘法操作有所區(qū)別。
還可以把getElementById和getElementsByTagName結(jié)合起來運用。如下所示:
var shopping = document.getElementById("purchase");
var items = shopping.getElementsByTagName("*");
這樣就可以得到id屬性值為purchase的元素包含著多少個元素。
getElementsByClassName方法只有較新的瀏覽器才支持。為了彌補這一點,DOM腳本程序員需要使用已有的DOM方法來實現(xiàn)自己的getElementsByClassName。而多數(shù)情況下,他們的實現(xiàn)過程都與下面這個getElementsByClassName大致相似:
function getElementsByClassName(node, classname){
if(node.getElementsByClassName){
return node.getElementsByClassName(classname);
}else{
var results = new Array();
var elems = node.getElementsByTagName("*");
for(var i=0;i<elems.length;i++){
if(elems[i].className.indexOf(classname) != -1){
results[results.length] = elems[i];
}
}
return results;
}
}
這個getElementsByClassName函數(shù)接受兩個參數(shù),第一個node表示DOM樹中的搜素起點,第二個classname就是要搜索的類名了。
getAttribute是一個函數(shù),它只有一個參數(shù)——你打算查詢的屬性的名字:
object.getAttribute(attribute)
setAttribute()允許我們對屬性節(jié)點的值做出修改。通過setAttribute對文檔作出修改后,在通過瀏覽器的view source(查看源代碼)選項去查看文檔的源代碼時看到的仍將是改變前的屬性值,也就是說,setAttribute做出的修改不會反映在文檔本身的源代碼里。這種“表里不一”的現(xiàn)象源自DOM的工作模式:先加載文檔的靜態(tài)內(nèi)容,再動態(tài)刷新,動態(tài)刷新不影響文檔的靜態(tài)內(nèi)容。這正是DOM的真正威力:對頁面內(nèi)容進行刷新卻不需要在瀏覽器里刷新頁面。